解决安卓返回键路由切换异常的问题

2018-04-27

使用$router.push()跳转路由.安装返回键返回路径问题

使用$router.push()跳转路由，在安卓返回键中不能正常返回，可以自定义返回路径，按如下操作：

state中定义两个状态

currentRouterName: '', // 存放当前页面的路由
routerHistory: { // 存放路由跳转规则，键为当前页面路由名称，值为返回时要回到的页面路径
timing: '/',
timing_weekday: '/timing',
timing_weekend: '/timing',
timing_settingWeekday: '/timing-weekday',
timing_settingWeekend: '/timing-weekend'
}

mutations.js中更改状态

1
2
3

export const getRouter = (state, routerName) => {
  state.currentRouterName = routerName
}

App.vue 中设置路径

如果页面中存在弹出层，返回键按下的时候应先关闭弹层,使用v-back指令，应添加v-if

hk-pop(
    v-model="settingPop"
    v-if="settingPop"
    v-back="settingPop"
    class="setting-pop"
  )

将app.vue作如下修改

computed: {
...mapState([
  'routerHistory',
  'currentRouterName'
])
},
// 安卓返回键点击
this.$hekr.on('back', () => {
console.log(this.$back.length)
if (this.$back.length) {
  return this.$back.pop()
}
if (this.$route.name === 'home') {
  return this.$hekr.close()
}
this.$router.push(this.routerHistory[this.currentRouterName])
// this.$router.back()
})

页面挂载的时候，更改状态，获取当前页面的路由name

可以直接传入当前页面的路由name，需要和state中的routerHistory对象的键对应，
也可以用 this.$router.history.current.name 获取路由名称，但是state中键值名称不能包括中划线，如果路由名称中存在中划线，需作一定转换。

1 2	this.getRouter('timing_weekday') // this.getRouter(this.$router.history.current.name)